<template>
	<view>
		<!-- 下面是组件形式写的mediaList,用途更广泛,喜欢的小伙伴可以改写 -->
		<!-- <view style="background: #fff;margin-bottom: 20upx;">
			<view class="goods" @click="click">
				<view class="top webkit">
					<view class="flex">订单号：{{data.order_number}}</view>
					<text v-if="data.status == 1">待付款</text>
					<text v-if="data.status == 2">待发货</text>
					<text v-if="data.status == 3">已发货</text>
					<text v-if="data.status == 4">已完成</text>
					<text v-if="data.status == 5">已取消</text>
				</view> -->
				<!-- 普通商品 -->
				<!-- <view v-for="(item,i1) in data.goodsInfo" :key="i1">
					<view class="center webkit">
						<image :src="item.goods_thumb_image" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 96upx;margin-top: 50upx;">{{item.goods_name}}</view>
						<view>
							<text>原价￥{{item.cost_price}}</text>
							<text style="color: #999;">x{{item.number}}</text>
						</view>
					</view>
				</view> -->
				<!-- 限时商品 -->
				<!-- <view v-if="data.order_number.indexOf('mpo') != -1">
					<view class="center webkit">
						<image :src="data.goods_thumb_image" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 96upx;margin-top: 50upx;">{{data.goods_name}}</view>
						<view>
							<text style="color: #999;">x{{data.number}}</text>
						</view>
					</view>
				</view> -->
				<!-- 拼团商品 -->
				<!-- <view v-if="data.order_number.indexOf('mao') != -1">
					<view class="center webkit">
						<image :src="data.goods_thumb" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 96upx;margin-top: 50upx;">{{data.goods_name}}</view>
						<view>
							<text style="color: #999;">x{{data.number}}</text>
						</view>
					</view>
				</view>
				
				<view>
					<view v-if="data.pay_type == 1" class="bottom">支付类型: 奖金余额</view>
					<view v-if="data.pay_type == 2" class="bottom">支付类型: 支付宝</view>
					<view v-if="data.pay_type == 3" class="bottom">支付类型: 微信</view>
					<view v-if="data.pay_type == 4" class="bottom">支付类型: 首单余额</view>
					<view class="bottom">共{{data.goods_number}}件商品 合计:￥{{data.price}}</view>
					<view class="bottom">(含运费:￥0.00)</view>
				</view>
				<view class="bottom" v-if="data.status != 1 && data.status != 5">
					 实付款: <text> {{data.pay_price}}</text>
				</view>
			</view> -->
			
			<!-- <view class="status webkit">
				<view class="flex"></view>
				<button type="primary" style="background-color: #000000;border-radius: 0;" v-if="data.order_number.indexOf('mao') != -1 && data.status == 2" @click.stop="share" >分享发起拼团</button>
				<button type="default" v-if='data.status == -1 || data.status == 3' style="line-height: 52upx;" plain="true" @click.stop="del">删除订单</button>
				<button type="primary" v-if='data.status == 1' style="background-color: #000000;border-radius: 0;" @click.stop="cancel">取消订单</button>
				<button type="primary" style="background-color: #000000;border-radius: 0;" v-if='data.status == 1' @click.stop="pay">现在付款</button>
				<button type="primary" v-if='data.status == 3&&data.iscomment == 0' @click.stop="evaluate">评价</button>
				<button type="primary" v-if='data.status == 3' @click.stop="log">查看物流</button>
				<button type="primary" v-if='data.status == 3' @click.stop="confirm">确认收货</button>
			</view>
		</view> -->
		
		<!-- 上面是示例自定义组件代码,下面是示例运行的图片 -->
		<view style="width: 100%;display: flex;flex-wrap: wrap;">
			<image src="../../../static/order/01.png" mode="widthFix" style="width: 100%;"></image>
			<image src="../../../static/order/02.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		 
	</view>
</template>
<script>
	export default {
		props: {
			data: {
				type: Object,
				default: function(e) {
					return {}
				}
			},
		},
		computed: {
			isImgRight() {
				 return this.data.article_type === 2
			},
			isImgLeft() {
				 return this.data.article_type === 1
			},
			showImg() {
				 return this.data.image_list || this.data.image_url
			}
		},
		methods: {
			cancel(e) {
					this.$emit('cancel');
			},
			share(e) {
					this.$emit('share');
			},
			click(e) {
					this.$emit('click');
			},
			log(e) {
					this.$emit('log');
			},
			evaluate(e) {
					this.$emit('evaluate');
			},
			del(e) {
					this.$emit('del');
			},
			pay(e) {
					this.$emit('pay');
			},
			confirm(e){
				this.$emit('confirm')
			},
			bindClick() {
					this.$emit('click');
			}
		}
	}
</script>

<style>
	/* 有空会改sass写法 */
	.goods{
		padding-bottom: 10upx;
		border-bottom: 1px solid #f0f0f0;
	}
	.goods .top{
		padding: 16upx 20upx;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 10upx;
	}
	.goods .top .flex{
		font-size: 26upx;}
	.goods .top text{
		color: #666;
		font-size: 26upx;
	}
	.goods .center{
		padding: 16upx 30upx;
		border-bottom: 1upx solid #FDFDFD;
	}
	.goods .center image{
		width: 160upx;
		height: 160upx;
		margin-right: 20upx;
	}
	.goods .center view{}
	.goods .center .flex{
		margin-right: 20upx;
	}
	.goods .center text{
		display: block;
		text-align: right;
		font-size: 26upx;
	}
	.goods .bottom{
		font-size: 24upx;
		text-align: right;
		padding: 10upx 30upx;
	}
	.goods .bottom text{
		font-size: 26upx;
		color: #f55;
	}
	.status{
		padding: 20upx;
	}
	.status button{
		height: 56upx;
		font-size: 24upx;
		line-height: 56upx;
		margin: 0;
		margin-left: 20upx;
		border-radius: 56upx;
	}
	.status button:after{
		display: none;
	}
</style>

